<template>
  <view class="anniversary allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack :title="options.is_flag == 1 ? '添加个人纪念日':'添加家庭成员纪念日'" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="birthday_date allRowCenter mt-25">
      <input type="text" class="birthday_date_input" :value="form.title" placeholder="点击输入纪念日标题"
             placeholder-class="birthday_date_placeholder" @input="titleInput"
             @blur="titleBlur">
    </view>
    <view class="birthday_date allRowCenter mt-25" @click.stop="openBetterCalendar">
      <text class="birthday_date_text">{{ !!form.dateBirth ? form.dateBirth : '点击选择纪念日期' }}</text>
    </view>
    <view class="birthday_date allRowCenter mt-25" @click.stop="goSelectFamilyMember">
      <text class="birthday_date_text">{{ !!form.selectName ? form.selectName : '点击选择家庭成员' }}</text>
    </view>
    <view class="birthday_tips column">
      <text class="birthday_tips_text mt-9">提示：</text>
      <text class="birthday_tips_text mt-9">1.首页只能为家庭成员添加生日或纪念日</text>
      <text class="birthday_tips_text mt-9">2.非家庭成员如需要添加纪念日请在我的里面进行添加</text>
    </view>
    <view class="birthday_bottomButton allRowCenter mt-239" @click.stop="submitAnniversary">
      <text class="birthday_bottomButton_text">完成</text>
    </view>

    <better-calendar class="z-999"
                     ref="betterCalendarRef"
                     :showCalendar="showCalendar"
                     @confirm="selectDate"
                     @cancel="showCalendar = false"
    ></better-calendar>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import BetterCalendar from "../../components/shiqinComponents/timePick/timePick.vue";
import {createCommemoration, createPersonalCommemoration} from "../../api/shiqinAPI";

export default {
  components: {BetterCalendar, HeaderTitle},
  data() {
    const INIT_DAY_TYPE = "solar";
    const INIT_DAY_TIMESTAMP = this.$dayjs().valueOf();
    const INIT_DAY = this.$dayjs().format("YYYY-MM-DD");
    return {
      // 头部高度
      headerHeight: 0,
      form: {
        title: '',
        dateBirth: '',
        selectId: '',
        selectName: ''
      },
      // 时间选择弹窗参数
      showCalendar: false,
      date: {
        type: INIT_DAY_TYPE, // 类型
        timestamp: INIT_DAY_TIMESTAMP, // 时间戳
        solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
        lunarDate: "", // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
        lunarDateNumber: "", // 农历生日的数字写法（1999-12-25）
      },
      options:{
        is_flag:0
      }
    };
  },
  onLoad(options) {
    console.log(options)
    this.options = options
    uni.$on('selectMember', info => {
      this.form.selectId = info.id
      this.form.selectName = info.username
    })
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    titleInput(e){
      this.form.title = e.target.value
    },
    titleBlur(e){
      this.form.title = e.target.value
    },
    getPageHeight(number) {
      this.headerHeight = number
    },
    goSelectFamilyMember() {
      this.$nav.navigateTo('/pages/familyAnniversary/selectFamilyMember')
    },
    openBetterCalendar() {
      this.showCalendar = true;
    },
    async selectDate(e) {
      this.date = await {
        type: e.type,
        timestamp: this.$dayjs(e.solarDate).valueOf(),
        solarDate: e.solarDate,
        lunarDate: e.lunarDate,
        lunarDateNumber: e.lunarDateNumber,
        isLeap: e.isLeap, // 一年里是否有闰月
      };
      this.form.dateBirth = e.solarDate
      this.showCalendar = false;
    },
    // 创建纪念日
    submitAnniversary(){
      if(!this.form.title){
        uni.showToast({
          icon: 'none',
          title: '请输入纪念日标题'
        })
        this.$toast('请输入纪念日标题')
        return
      }
      if(!this.form.dateBirth){
        uni.showToast({
          icon: 'none',
          title: '请选择纪念日日期'
        })
        return
      }
      if(!this.form.selectId){
        uni.showToast({
          icon: 'none',
          title: '请选择家庭成员'
        })
        return
      }
      if(this.options.is_flag != 1){
        createCommemoration({
          family_id: this.$store.state.shiqinStore.selectedId,
          member_ids: this.form.selectId,
          time: this.form.dateBirth,
          type:this.date.type == 'solar' ? 2:1,
          name: this.form.title
        }).then(res=>{
          if(res.status == '200'){
            uni.showToast({
              title: '添加成功',
              icon: 'none'
            })
            this.$store.dispatch('setFamilyDetail')
            setTimeout(()=>{
              uni.navigateBack()
            },1000)
          }else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
      }else{
        createPersonalCommemoration({
          member_id: this.options.member_id,
          member_ids: this.form.selectId,
          time: this.form.dateBirth,
          type:this.date.type == 'solar' ? 2:1,
          name: this.form.title,
          status:1
        }).then(res=>{
          if(res.status == '200'){
            uni.showToast({
              title: '添加成功',
              icon: 'none'
            })
            uni.$emit('memberDetail')
            setTimeout(()=>{
              uni.navigateBack()
            },1000)
          }else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
      }
    }
  },
}
</script>

<style lang="scss">
.anniversary {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .birthday_date {
    width: 702rpx;
    height: 80rpx;
    background: #FFFFFF;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .birthday_date_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }

    .birthday_date_placeholder {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }

    .birthday_date_input {
      text-align: center;
    }
  }

  .birthday_tips {
    width: 702rpx;

    .birthday_tips_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }
  }

  .birthday_bottomButton {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    .birthday_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>
